<template>
  <div class="container">

    <base-header ref="baseheader" @onSearch="onSearch" :tabs-name="tabsName"></base-header>

    <Card dis-hover>
      <div
        class="flex bgFFF space-between color000 pl20 pr20 pt16 btn-section"
        style="position: relative; z-index: 10"
      >
        <div class="flex flex-y-center">
          <button-menu></button-menu>
        </div>
        <div class="flex flex-y-center">
          <RadioGroup
            v-model="criteria.orderStatus"
            type="button"
            @on-change="handleStatus"
          >
            <Radio label="">全部</Radio>
            <Radio label="4">已支付</Radio>
            <Radio label="2">退款中</Radio>
            <Radio label="3">退款成功</Radio>
          </RadioGroup>
        </div>
      </div>
    </Card>

    <!-- 列表区 -->
    <BaseTable
      ref="table"
      :loading="tableLoading"
      v-model="criteria"
      :columns="columns"
      :data="tableData"
      @on-search="loadData"
    >
    </BaseTable>


    <!--  查看抽屉  -->
    <base-drawers
      v-model="showViewDrawers"
      title="订单信息"
      :showButton="false"
      @input="cancelBt('showViewDrawers')"
    >
      <detail ref="detail" :show-log="false"></detail>
    </base-drawers>
  </div>
</template>

<script>
import BaseModal from "_c/base-modal"
import BaseHeader from "./components/base-header"
import BaseDrawers from "_c/base-drawers/base-drawers";
import labelInfo from "_c/labelInfo/labelInfo";
import Detail from "./components/detail";

import getDateFn from '@/libs/getDate'

export default {
  components: {
    BaseModal,
    BaseHeader,
    BaseDrawers,
    labelInfo,
    Detail,
  },
  data() {
    return {
      tabsName: "",
      tableLoading: false,
      tableData: [], // 列表绑定数据
      /**
       * 查询条件
       */
      criteria: {
        total: 0,
        page: {
          current: 1,
          size: 10,
        },
      },
      /**
       * 表格字段
       */
      columns: [
        {
          fixed: "left",
          title: "订单编号",
          key: "orderNo",
          align: "left",
          width: 240,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "姓名",
          key: "payName",
          width: 140,
          align: "left",
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "缴费年份",
          key: "orderYear",
          align: "left",
          minWidth: 100,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "身份证号",
          key: "payIdCard",
          align: "left",
          width: 190,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h("span", {style: {textAlign: "left"}},
              this.commonFn(params.row.payIdCard, 6, 4)
            );
          },
        },
        {
          title: "缴费金额",
          key: "orderAmount",
          align: "left",
          width: 100,
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              params.row.orderAmount ? params.row.orderAmount / 100 : 0
            );
          },
        },
        {
          title: "提交人",
          key: "submitInfo",
          align: "left",
          width: 150,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "缴费时间",
          key: "payDate",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              params.row.payDate || '-'
            );
          },
        },
        {
          title: "订单状态",
          key: "orderStatus",
          align: "left",
          width: 170,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            let orderStatus = "";
            if (params.row.orderStatus == 1) {
              orderStatus = "订单创建成功未支付";
            } else if (params.row.orderStatus == 2) {
              orderStatus = "退款中";
            } else if (params.row.orderStatus == 3) {
              orderStatus = "退款成功";
            } else if (params.row.orderStatus == 4) {
              orderStatus = "已缴费";
            }
            return h("span", {style: {textAlign: "left"}}, orderStatus);
          },
        },
        {
          title: "标签",
          key: "residentTagsList",
          align: "left",
          minWidth: 400,
          render: (h, params) => {
            var arr = []
            if (params.row.residentTagsList) {
              for (let i = 0; i < params.row.residentTagsList.length; i++) {
                arr.push(params.row.residentTagsList[i].tagName)
              }
            }
            return (
              <div>
                <labelInfo labelInfo={arr}></labelInfo>
              </div>
            );
          },
        },
      ],
      // 查看
      showViewDrawers: false,
    };
  },
  computed: {},
  watch: {
    $route(val) {
      this.tabsName = this.$route.query.tabsName;
      this.criteria.orderStatus = "";
      this.$nextTick(() => {
        this.$refs.baseheader.onReset();
      });
    }
  },
  created() {
    let buttonMenu = this.buttonMenu(this.$route.name);
    this.columns.push(this.columnMenu(buttonMenu.buttonRight, this, 180));

    this.tabsName = this.$route.query.tabsName;
    if(this.$route.params.orderStatus) {
      this.criteria.orderStatus = this.$route.params.orderStatus;
    }


    this.criteria.payStartDate = "";
    this.criteria.payEndDate = "";
    // 工作台穿透
    let tabsId = this.$route.params.tabsId;
    if (tabsId) {
      let startDate = "";
      let endDate = "";
      if (tabsId == "day") {  // 今日
        startDate = getDateFn.getDate();
        endDate = getDateFn.getDate();
      }
      if (tabsId == "week") {  // 本周
        startDate = getDateFn.getMonday('s');
        endDate = getDateFn.getMonday('e');
      }
      if (tabsId == "month") {  // 本月
        startDate = getDateFn.getMonth('s', 0);
        endDate = getDateFn.getMonth('e', 0);
      }
      if (tabsId == "year") {  // 本年
        startDate = getDateFn.getYear('s', 0);
        endDate = getDateFn.getYear('e', 0);
      }
      this.$nextTick(() => {
        this.$refs.baseheader.pickDate = [startDate, endDate];
        this.$refs.baseheader.pageData.payStartDate = startDate;
        this.$refs.baseheader.pageData.payEndDate = endDate;
      })
      this.criteria.orderStatus = '4'
      this.criteria.payStartDate = startDate;
      this.criteria.payEndDate = endDate;
    }
    this.loadData();
  },
  methods: {
    onSearch(data) {
      this.criteria = {
        ...data,
        orderStatus: this.criteria.orderStatus
      };
      this.loadData();
    },
    handleStatus() {
      this.criteria.page.current = 1;
      this.criteria.page.total = 0;
      this.loadData();
    },
    // 初始化获取列表数据
    loadData() {
      this.tableLoading = true;
      let data = {
        ...this.criteria,
      };
      let requestData = "";
      if (this.tabsName === "yibaoorder") {
        requestData = "orderPageYiBao";
      } else if (this.tabsName === "shebaoorder") {
        requestData = "orderPageSheBao";
      }
      this.APIS[requestData](data).then((res) => {
        this.tableLoading = false;
        if (res.code == 20000) {
          if (res.data.total) {
            res.data.records.map(item => {
              item.hide = item.orderStatus == 4 ? false : true;
              return item;
            })
          }
          this.criteria.total = res.data.total;
          this.tableData = res.data.records;
        } else {
          this.$Message.error(res.message)
        }
      }).catch(err => {
        this.tableLoading = false;
      });
    },
    // 查看
    handleView(params) {
      this.showViewDrawers = true;
      this.$refs.detail.getDetail(params);
      this.$refs.detail.orderdetailfun(params);
    },
    // 关闭抽屉
    cancelBt(drawerName) {
      this[drawerName] = false;
    },
  },
};
</script>


<style lang="less" scoped>
</style>
